<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/home.css">
</head>
<body>
    <header>
        <!-- 既是头像也是主页按钮 -->
        <div class="brand"><img src="./img/runtu.jpg" alt=""></div>
        <!-- 手机端导航按钮 -->
        <div class="navButton">
            <div class="lineOne"></div>
            <div class="lineTwo"></div>
            <div class="lineThree"></div>
        </div>
        <!-- 导航 -->
        <div class="nav">
            <!-- 只狼 -->
            <div class="sekiro">只狼</div>
            <!-- 巨人 -->
            <div class="AOT">巨人</div>
            <!-- 魁拔 -->
            <div class="kuiBa">魁拔</div>
            <!-- 黑夜白天 -->
            <div class="theme">
                <!-- 按钮 -->
                <div class="button">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"/></svg>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M495.8 0c5.5 0 10.9 .2 16.3 .7c7 .6 12.8 5.7 14.3 12.5s-1.6 13.9-7.7 17.3c-44.4 25.2-74.4 73-74.4 127.8c0 81 65.5 146.6 146.2 146.6c8.6 0 17-.7 25.1-2.1c6.9-1.2 13.8 2.2 17 8.5s1.9 13.8-3.1 18.7c-34.5 33.6-81.7 54.4-133.6 54.4c-9.3 0-18.4-.7-27.4-1.9c-11.2-22.6-29.8-40.9-52.6-51.7c-2.7-58.5-50.3-105.3-109.2-106.7c-1.7-10.4-2.6-21-2.6-31.8C304 86.1 389.8 0 495.8 0zM447.9 431.9c0 44.2-35.8 80-80 80H96c-53 0-96-43-96-96c0-47.6 34.6-87 80-94.6l0-1.3c0-53 43-96 96-96c34.9 0 65.4 18.6 82.2 46.4c13-9.1 28.8-14.4 45.8-14.4c44.2 0 80 35.8 80 80c0 5.9-.6 11.7-1.9 17.2c37.4 6.7 65.8 39.4 65.8 78.7z"/></svg>
                </div>
            </div>
            <!-- 语言 -->
            <div class="language">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M0 128C0 92.7 28.7 64 64 64H256h48 16H576c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H320 304 256 64c-35.3 0-64-28.7-64-64V128zm320 0V384H576V128H320zM178.3 175.9c-3.2-7.2-10.4-11.9-18.3-11.9s-15.1 4.7-18.3 11.9l-64 144c-4.5 10.1 .1 21.9 10.2 26.4s21.9-.1 26.4-10.2l8.9-20.1h73.6l8.9 20.1c4.5 10.1 16.3 14.6 26.4 10.2s14.6-16.3 10.2-26.4l-64-144zM160 233.2L179 276H141l19-42.8zM448 164c11 0 20 9 20 20v4h44 16c11 0 20 9 20 20s-9 20-20 20h-2l-1.6 4.5c-8.9 24.4-22.4 46.6-39.6 65.4c.9 .6 1.8 1.1 2.7 1.6l18.9 11.3c9.5 5.7 12.5 18 6.9 27.4s-18 12.5-27.4 6.9l-18.9-11.3c-4.5-2.7-8.8-5.5-13.1-8.5c-10.6 7.5-21.9 14-34 19.4l-3.6 1.6c-10.1 4.5-21.9-.1-26.4-10.2s.1-21.9 10.2-26.4l3.6-1.6c6.4-2.9 12.6-6.1 18.5-9.8l-12.2-12.2c-7.8-7.8-7.8-20.5 0-28.3s20.5-7.8 28.3 0l14.6 14.6 .5 .5c12.4-13.1 22.5-28.3 29.8-45H448 376c-11 0-20-9-20-20s9-20 20-20h52v-4c0-11 9-20 20-20z"/></svg>
            </div>
            <!-- 退出登录 -->
            <div class="log-out">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M160 96c17.7 0 32-14.3 32-32s-14.3-32-32-32H96C43 32 0 75 0 128V384c0 53 43 96 96 96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H96c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32h64zM504.5 273.4c4.8-4.5 7.5-10.8 7.5-17.4s-2.7-12.9-7.5-17.4l-144-136c-7-6.6-17.2-8.4-26-4.6s-14.5 12.5-14.5 22v72H192c-17.7 0-32 14.3-32 32l0 64c0 17.7 14.3 32 32 32H320v72c0 9.6 5.7 18.2 14.5 22s19 2 26-4.6l144-136z"/></svg>
            </div>
        </div>
    </header>

    <main>
        <!-- 主页结束位 -->
        <div class="introduce">
            <h3>我的</h3>
            <h3>第一个网站</h3>
            <p>游戏、动漫，欢迎来到我的世界</p>
        </div>
        <div class="ninth">第九艺术</div>
        <!-- 只狼展示位 -->
        <div class="sekiro">
            <h3>只狼</h3>
            <div class="button"><span>进入苇名</span><svg t="1667317336910" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2397" width="200" height="200"><path d="M744.127127 656.563954v115.727888H281.407387v-115.727888h357.158003z" fill="#FF4893" p-id="2398"></path><path d="M575.842153 656.563954h-188.873029V40.616653l251.596266 231.35987v384.587431z" fill="#5FCEFF" p-id="2399"></path><path d="M446.974993 841.312978v-69.021136h128.86716v208.214293h-128.86716v-69.244919z" fill="#FFB578" p-id="2400"></path><path d="M638.56539 678.942275a22.378321 22.378321 0 0 1-22.378321-22.378321V281.800606l-206.839624-190.202941v564.966289a22.378321 22.378321 0 1 1-44.756642 0V40.616653a22.378321 22.378321 0 0 1 37.528444-16.473642l251.596266 231.359871a22.384715 22.384715 0 0 1 7.231395 16.473641v384.587431a22.381518 22.381518 0 0 1-22.381518 22.378321z" fill="#4F46A3" p-id="2401"></path><path d="M744.127127 794.670163h-168.288171a22.378321 22.378321 0 1 1 0-44.756642h145.90985v-70.971246H303.785708v70.971246h143.189285a22.378321 22.378321 0 1 1 0 44.756642h-165.567606a22.378321 22.378321 0 0 1-22.378321-22.378321v-115.727888a22.378321 22.378321 0 0 1 22.378321-22.378321h462.71974a22.378321 22.378321 0 0 1 22.378321 22.378321v115.727888a22.378321 22.378321 0 0 1-22.378321 22.378321z" fill="#4F46A3" p-id="2402"></path><path d="M575.842153 1002.884456h-128.86716a22.378321 22.378321 0 0 1-22.378321-22.378321v-208.214293a22.378321 22.378321 0 0 1 22.378321-22.378321h128.86716a22.378321 22.378321 0 0 1 22.378321 22.378321v208.214293a22.378321 22.378321 0 0 1-22.378321 22.378321z m-106.488839-44.756642h84.110518v-163.457651h-84.110518v163.457651zM575.842153 678.942275a22.378321 22.378321 0 0 1-22.378321-22.378321v-327.011208a22.378321 22.378321 0 1 1 44.756642 0v327.011208a22.378321 22.378321 0 0 1-22.378321 22.378321z" fill="#4F46A3" p-id="2403"></path><path d="M510.976991 863.691299h-64.001998a22.378321 22.378321 0 1 1 0-44.756642h64.001998a22.378321 22.378321 0 1 1 0 44.756642zM510.976991 933.639537h-64.001998a22.378321 22.378321 0 1 1 0-44.756642h64.001998a22.378321 22.378321 0 1 1 0 44.756642z" fill="#4F46A3" p-id="2404"></path></svg></div>
        </div>
        <div class="anime">动漫</div>
        <!-- 巨人展示位 -->
        <div class="AOT">
            <h3>进击的巨人</h3>
            <div class="button"><span>塔塔开</span><svg t="1667320707089" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2411" width="200" height="200"><path d="M639.96 320V32c0-17.68-14.32-32-32-32h-64c-17.68 0-32 14.32-32 32v293.86c10.04-3.56 20.68-5.86 31.94-5.86h96.06z m256 191.98c-0.02-70.68-57.32-127.98-127.98-127.98H543.7c-17.56 0-31.8 14.14-31.8 31.7v1.12c0 52.54 42.6 95.18 95.14 95.18h70.52c19.36 0 26.4 7.16 26.4 16v32.4c0 8.58-7.18 15.56-15.76 16-89.04 4.56-128.32 49.42-192.1 145.1l-12.62 18.94a15.988 15.988 0 0 1-22.18 4.44l-26.62-17.76a15.988 15.988 0 0 1-4.44-22.18l12.62-18.94c31.46-47.2 60.4-86.52 94.62-116.16-34.54-11.02-62.8-36.24-77.74-68.9-13.18 6.82-27.92 11.04-43.74 11.04h-64c-24.68 0-46.98-9.62-64-24.96C270.96 502.38 248.66 512 224 512H160c-11.28 0-21.94-2.3-32-5.9v155.86c0 67.9 26.96 133 74.98 181.02L255.98 896v128h511.96v-127.92l71.82-71.84A192.07 192.07 0 0 0 896 688.42l-0.04-176.44z m-64.02-180.18V96c0-17.68-14.32-32-32-32h-64c-17.68 0-32 14.32-32 32v224h64c22.56 0 43.88 4.62 64 11.8zM160 448h64c17.68 0 32-14.32 32-32V160c0-17.68-14.32-32-32-32H160C142.32 128 128 142.32 128 160v256c0 17.68 14.32 32 32 32z m191.98 0h64c17.68 0 32-14.32 32-32V96c0-17.68-14.32-32-32-32h-64c-17.68 0-32 14.32-32 32v320c0 17.68 14.32 32 32 32z" p-id="2412"></path></svg></div>
        </div>
        <!-- 魁拔展示位 -->
        <div class="kuiBa">
            <h3>魁拔</h3>
            <div class="button"><span>齐衡三</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M256 448C150 448 64 362 64 256S150 64 256 64s192 86 192 192s-86 192-192 192zm0 64c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM200 256c0-20.7 11.3-38.8 28-48.5l-36-62.3c-8.8-15.3-28.7-20.8-42-9c-25.6 22.6-43.9 53.3-50.9 88.1C95.7 241.5 110.3 256 128 256l72 0zm28 48.5l-36 62.4c-8.8 15.3-3.6 35.2 13.1 40.8c16 5.4 33.1 8.3 50.9 8.3s34.9-2.9 50.9-8.3c16.7-5.6 21.9-25.5 13.1-40.8l-36-62.4c-8.2 4.8-17.8 7.5-28 7.5s-19.8-2.7-28-7.5zM312 256l72 0c17.7 0 32.3-14.5 28.8-31.8c-7-34.8-25.3-65.5-50.9-88.1c-13.2-11.7-33.1-6.3-42 9l-36 62.3c16.7 9.7 28 27.8 28 48.5zm-56 32c17.7 0 32-14.3 32-32s-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32z"/></svg></div>
        </div>
    </main>

    <footer>
        <h3>关于</h3>
        <div class="container">
            <div class="introduce">
                <h3>简介</h3>
                <div>
                    <span>QQ:</span>
                    <a>1129245399</a>
                </div>
                <div>
                    <span>邮箱:</span>
                    <a>qq1129245399@gmail.com</a>
                </div>
            </div>
            <div class="openSource">
                <h3>开源</h3>
                <div>
                    <a href="https://github.com/Runtusroar/myAlert.git">GitHub</a>
                </div>
                <div>
                    <a href="https://gitee.com/killruntu/my-module.git">Gitee</a>
                </div>
                <div>
                    <a href="https://www.bilibili.com/">Bilibili</a>
                </div>
            </div>
        </div>
    </footer>
    <script>
        // 导航按钮
        let navButton = document.querySelector('.navButton')
        navButton.addEventListener('click', ()=>{
            navButton.classList.toggle('buttonActive')
        })

        // 颜色主题
        let root = document.querySelector(':root')
        let theme = document.querySelector('.theme')
        theme.addEventListener('click',()=>{
            theme.classList.toggle('themeActive')
            if(root.getAttribute('theme')){
                root.removeAttribute('theme')
            }else{
                root.setAttribute('theme','dark')
            }
        })

        // 语言主题
        let lang = document.querySelector('.language')
        lang.addEventListener('click',()=>{
            lang.classList.toggle('langActive')
        })

        // 控制导航栏跳转
        let logOut = document.querySelector('.log-out')
        logOut.addEventListener('click',()=>{
            location.pathname = './index.html'
        })

        //设置主题

    </script>
</body>
</html>